<template>
  <div class="more-close" @click.stop>
    <img class="more" :src="moreSrc" @click="moreHandle">
    <p class="sep" :style="style" />
    <img class="close" :src="closeSrc" @click="closeHandle">
  </div>
</template>
<script>
import more from '@/assets/more.png'
import close from '@/assets/close.png'
import moreBlack from '@/assets/more_black.png'
import closeBlack from '@/assets/close_black.png'
export default {
  name: 'MoreClose',
  props: {
    black: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    moreSrc() {
      return this.black ? moreBlack : more
    },
    closeSrc() {
      return this.black ? closeBlack : close
    },
    style() {
      return this.black ? { backgroundColor: 'rgba(0,0,0,0.2)' } : { backgroundColor: 'rgba(255, 255, 255, 0.6)' }
    }
  },
  methods: {
    closeHandle() {
      this.$nativeHandler('closeWeb', {})
    },
    moreHandle() {
      // this.$emit('more')
      this.$nativeHandler('showQMPMenu', '').then(res => {
        // dosomething 这里会返回一些信息  比如回到首页按钮点击事件 "{isGoHome:true}"
        if (res.isGoHome) {
          this.$router.replace({
            name: 'HomeIndex'
          })
        }
      }).catch(() => {

      })
    }
  }
}
</script>
<style lang="less" scoped>
.more-close{
  width: 80PX;
  height: 30PX;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(255,255,255,0.6);
  border-radius: 16PX;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 0 8PX;
  box-sizing: border-box;
  .more,.close{
    flex: 0 0 auto;
    width: 22PX;
    height: 22PX;
  }
  .sep{
    flex: 0 0 auto;
    width: 1px;
    height: 18PX;
    background-color: rgba(255, 255, 255, 0.6);
  }
  .close{

  }
}
</style>
